<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    <script>
        // 发送ajax 请求, 返回的结果是Promise对象
        function sendAJAX(url){
            return new Promise((resolve,reject)=>{
                // 1.创建ajax对象
                const xhr = new XMLHttpRequest();
                // 2.调用open
                //  第一个参数:请求方式  get opst
                //  第二个参数:url
                //  第三个参数:是否异步
                //     true:异步
                //     false:同步
                xhr.open("get",url,true);
                //xhr.open("get","../php/php1.php",true);
                // 3. 调用send    发送请求
                xhr.send();
                // 4.等待数据响应
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300){
                            // 表示成功
                            resolve(xhr.response);
                        }else{
                            // 如果失败
                            reject(xhr.status);
                        }
                    }
                }
            })
        }

        // Pronise then方法 测试
        /* sendAJAX("https://api.apiopen.top/getJoke").then((value)=>{
            console.log(value);
        },(reason)=>{
            console.log(reason);
        }); */

        // async和await测试
        async function main(){
            // 发送ajax请求
            let result =  await sendAJAX("https://api.apiopen.top/getJoke");
            // 再次测试
            let tianqi = await sendAJAX("https://api.asilu.com/geo/");
            // 都可以打印
            console.log(result);
            console.log(tianqi);
        }
        main();
    </script>
</html>